<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父组件和子组件 script模板 template标签</title>
</head>

<body>
    <div id="app">
        <parent-component> </parent-component>
        <my-component> </my-component>
        <my-component2> </my-component2>
        <template id="myComponent2">
            <div>template标签</div>
        </template>
    </div>
    <script type="text/x-template" id="myComponent">
        <div>组件内容 </div>
    </script>

</body>
<script src="assets/js/vue.js">
</script>
<script>
    var child = Vue.extend({
        template: "<ul> <li>2222222222222222222222</li></ul>"
    });
    var parent = Vue.extend({
        template: "<ul> <li>11111111111111111111<child-component> </child-component></li></ul> ",
        components: {
            "child-component": child
        }
    });
    Vue.component("parent-component", parent);
    var myComponent = Vue.extend({
        template: "<ul> <li>2222222222222222222222</li></ul>"
    });
    Vue.component("my-component",
        {
            template: "#myComponent"
        });
    Vue.component('my-component2', {
        template: '#myComponent2'
    })
    new Vue({
        el: "#app"
    });

</script>

</html>